<template>
  <view class="row k-row">
    <canvas
      :canvas-id="'canvasCandle' + index"
      :id="'canvasCandle' + index"
      class="charts"
      @touchstart="touchLineA"
      @touchmove="moveLineA"
      @touchend="touchEndLineA"
    ></canvas>
  </view>
</template>

<script>
import uCharts from '@/uni-components/u-charts/u-charts.js'

export default {
  props: {
    numbers: {
      type: [Array],
      default: () => {
        return []
      },
    },
    kData: {
      type: [Array, Object],
      default: () => {
        return []
      },
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      canvasId: 'canvasCandle' + this.index,
      canvasCandle: null,
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      itemCount: 20, //x轴单屏数据密度
      sliderMax: 50,
      dataMap: {
        yilou: '实出',
        cha: '差值',
        cycle: '回补几率',
        cur: '当前遗漏',
        max: '最大遗漏',
      },
      yilouK: {
        series: [],
        categories: [],
      },
    }
  },
  methods: {
    showCandle(canvasId, chartData) {
      let _self = this
      this.canvasCandle = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'candle',
        fontSize: 11,
        legend: { show: false },
        padding: [15, 20, 0, 15],
        dataPointShape: true,
        background: '#091522',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        enableScroll: true,
        xAxis: {
          gridColor: '#FFFFFF',
          disableGrid: true,
          scrollShow: false,
          itemCount: 10, //x轴单屏显示数据的数量，默认为5个
          labelCount: 3,
          boundaryGap: 'justify',
          // rotateLabel: true,
          scrollAlign: 'right', //滚动条初始位置
        },
        yAxis: {
          splitNumber: 4,
          gridColor: '#162638',
          format: val => {
            return val.toFixed(0)
          },
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          candle: {
            color: {
              upLine: '#F63735',
              upFill: '#F63735',
              downLine: '#66E9F6',
              downFill: '#66E9F6',
            },
          },
          tooltip: {
            gridType: 'dash',
            dashLength: 5,
            gridColor: '#1890ff',
            fontColor: '#FFFFFF',
            horizentalLine: true,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: '#DFE8FF',
            labelBgOpacity: 0.95,
            labelAlign: 'left',
            labelFontColor: '#666666',
          },
        },
      })
    },
    setChart() {
      let categories = []
      let series = [
        {
          name: '',
          data: [],
        },
      ]

      if (typeof this.kData !== 'object') {
        return
      }

      ;(this.kData || []).forEach(k => {
        categories.push(k.qihao.slice())
        let obj = [k.open, k.close, k.low, k.high]
        series[0].data.push(obj)
      })

      this.$set(this.yilouK, 'series', series)
      this.$set(this.yilouK, 'categories', categories)

      this.cWidth = uni.upx2px(654)
      this.cHeight = uni.upx2px(240)
      setTimeout(() => {
        this.showCandle('canvasCandle' + this.index, { series, categories })
      }, 200)
    },
    touchLineA(e) {
      this.canvasCandle.scrollStart(e)
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      this.canvasCandle.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        },
      })
    },
    moveLineA(e) {
      this.canvasCandle.scroll(e)
    },
    touchEndLineA(e) {
      this.canvasCandle.scrollEnd(e)
    },
  },
  created() {
    this.setChart()
  },
  watch: {
    kData() {
      this.setChart()
    },
  },
}
</script>

<style lang="scss" scoped>
.k-row {
  width: 100%;
  height: 240upx;
  background-color: #091522;
  // border: 1px solid #e03997;
  .charts {
    width: 654upx;
    height: 240upx;
    background-color: #091522;
  }
}
</style>
